<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import {
  Menu as IconMenu,
  Message,
  Setting,
  PictureFilled,
  Avatar,
  HelpFilled,
  InfoFilled,
  ChromeFilled,
  ArrowRightBold,
  ArrowLeftBold,
  Operation,
  Flag,
  Expand,
  Fold,
} from "@element-plus/icons-vue";
import { onMounted, reactive, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getMenu } from "@/router/grants";
const $router = useRouter();
const $route = useRoute()
/* 面包屑导航 */
const breadcrumb = reactive<Array<string>>([]);
  let list = computed(() => {
    return $route.matched
})
console.log("面包屑List", list);


/* 折叠菜单 */
const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

/* 用户名 */

let username: string = ref(localStorage.getItem("username"));

/* 退出登录 */
const confirmEvent = () => {
  $router.replace("/login");
  localStorage.removeItem("token");
  localStorage.removeItem("username");
};
const cancelEvent = () => {
  console.log("cancel!");
};

/* 权限处理 */
let checkedkeys = JSON.parse(localStorage.getItem("menukeys") as string);
let menus = getMenu(checkedkeys, $router);
// console.log("menus", menus);
</script>

<template>
  <div class="common-layout">
    <el-container class="outer-box">
      <!-- 头部 -->

      <el-container class="content-box">
        <!-- 底部内容左边 -->
        <!-- 添加抽屉 -->

        <!-- <el-scrollbar> -->
        <!-- el-menu是菜单容器 -->

        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
          :router="true"
          background-color="#001529"
          active-text-color="#ffd04b"
          text-color="#fff"
          height="100%"
        >
          <el-menu-item>
            <el-icon color="#61dafb"><ChromeFilled color="#61dafb" /></el-icon>
            <template #title>HAIGOU_ADMIN</template>
          </el-menu-item>
          <template v-for="(item, index) in menus">
            <template v-if="!item.children">
              <el-menu-item :index="item.path">
                <el-icon>
                  <PictureFilled />
                </el-icon>
                <span>{{ item.label }}</span></el-menu-item
              >
            </template>
            <template v-else>
              <el-sub-menu :index="index">
                <template #title>
                  <el-icon> <PictureFilled /> </el-icon
                  ><span>{{ item.label }}</span>
                </template>

                <el-menu-item
                  v-for="subitem in item.children"
                  :index="'/home/' + subitem.path"
                >
                  <el-icon>
                    <Operation />
                  </el-icon>
                  {{ subitem.label }}
                </el-menu-item>
              </el-sub-menu>
            </template>
          </template>
          <!-- <el-sub-menu index="9">
                <template #title>
                  <el-icon> <icon-menu /> </el-icon>PinaDemo
                </template>
              </el-sub-menu> -->
        </el-menu>
        <!-- </el-scrollbar> -->

        <!-- 底部内容右边 -->

        <el-main>
          <div class="right-header" style="height: 50px">
            <div class="switch">
              <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button :label="false" v-show="isCollapse"
                  ><el-icon color="black"><Expand /></el-icon
                ></el-radio-button>
                <el-radio-button :label="true" v-show="!isCollapse">
                  <el-icon color="black"><Fold /></el-icon>
                </el-radio-button>
              </el-radio-group>
            </div>
            <div class="header-right-user">
              <span>欢迎您：</span> <span>{{ username }}</span
              >&nbsp;
              <el-popconfirm
                title="您要退出登录吗？"
                @confirm="confirmEvent"
                @cancel="cancelEvent"
              >
                <template #reference>
                  <el-icon> <Avatar /></el-icon>
                </template>
              </el-popconfirm>
            </div>
            
          </div>
          <!-- 面包屑导航 ArrowLeftBold-->
          <el-breadcrumb>
            <el-breadcrumb-item  :to="{path: '/home'}">
               系统首页
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="item in list" :key="item.path">
                <router-link :to="{ path: item.path }">
                  {{ item.meta.title }} </router-link>
              </el-breadcrumb-item>
            </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}
.outer-box {
  width: 100%;
  height: 100%;
}
.content-box {
  height: 100%;
}
.right-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/* 折叠菜单 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 400px;
}

.switch {
  width: 250px;
}
.header-right-user {
  width: 200px;
}
</style>
